<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>详情</title>
    <link rel="stylesheet" type="text/css" href="__CSS__api.css" />
    <link rel="stylesheet" type="text/css" href="__CSS__aui.css" />
    <link rel="stylesheet" type="text/css" href="__CSS__dropload.css" />
    <style>
        body {
            background: #F5F5F5;
            padding-top:0.4rem;
            padding-bottom:2.475rem;
        }
        .news{
            background-color: #FFFFFF;
            padding:0.8rem 1rem;
        }
        .title{
            color:#4D4D4D;
            font-size:17px;
            line-height:1.05rem;
            font-weight: bold;
        }
        .intro{
            color:#999999;
            font-size:12px;
            padding-top:0.875rem;
            padding-bottom:1rem;
        }
        .time{
            padding-left:0.5rem;
        }

        /*评论*/

        .comment {
            margin-top: 0.5rem;
            padding: 0.75rem;
            font-size: 0.7rem;
            background-color: #fff;
        }

        .comment_title {
            margin-bottom: 0.75rem;
        }

        .user_img {
            width: 2.5rem;
        }

        .user_img img {
            width: 1.75rem;
            height: 1.75rem;
        }

        .user_name {
            font-size: 0.65rem;
            height: 1.75rem;
            line-height: 1.75rem;
        }

        .comment_delete {
            float: right;
            width: 2.5rem;
            height: 1.75rem;
            display: inline-block;
            background: url('__IMG__main1_delete.png') no-repeat right center;
            background-size: 17px 17px;
        }

        /*.comment_desc,*/
        .comment_imgs,.comment_imgs1,.comment_imgs2{
            margin-top: 0.5rem;
            /*padding-bottom: 0.5rem;*/
        }

        .comment_imgs img,  .comment_imgs1 img ,  .comment_imgs2 img  {
            float: left;
            margin-right: 0.5rem;
            border-radius: 0.25rem;
        }

        .comment_imgs2 img{
            width: 8.5rem;
            height: 8.5rem;
        }

        .comment_imgs img:last-child,.comment_imgs1 img:last-child {
            float: left;
            margin-right: 0;
        }

        .comment_txt {
            background-color: #f5f5f5;
            padding: 0.75rem 0.5rem 0.75rem 0.75rem;
            margin-top: 0.5rem;
            /*margin-bottom: 0.3rem;*/
        }

        .red_delete {
            float: right;
            color: #E73C5C;
            font-size: 0.6rem;
            padding: 2px 0 0 10px;
        }

        .comment_two {
            margin-top: 0.3rem;
        }

        .comment_three {
            margin-top: 0.5rem;
            color: #47A1FE;
        }

        .edit {
            width: 2.8rem;
            height: 2.8rem;
            border-radius: 50%;
            margin: 0.75rem auto;
        }

        .comment_footer {
            height: 30px;
            line-height: 30px;
            color: #b3b3b3;
            font-size: 0.8rem;
            margin-top: 0.25rem;
        }

        .comment_time{
            font-size: 0.6rem;
        }

        .zan {
            width: 22px;
            height: 30px;
            display: inline-block;
            background: url('__IMG__main1_nozan.png') no-repeat center center;
            background-size: 13px 13px;
            vertical-align: bottom;
        }
        .zan1 {
            width: 22px;
            height: 30px;
            display: inline-block;
            background: url('__IMG__main1_zan.png') no-repeat center center;
            background-size: 13px 13px;
            vertical-align: bottom;
        }
        .comment_total {
            width: 22px;
            height: 30px;
            display: inline-block;
            background: url('__IMG__main1_news.png') no-repeat center center;
            background-size: 13px 13px;
            vertical-align: bottom;
        }
        .float_right{
            display: inline-block;width: auto;
            height: 30px;
            line-height: 30px;
            float: right;
        }
        .comment_all{
            margin-right: 1rem;
        }
        .comment_footer {
            height: 30px;
            line-height: 30px;
            color: #b3b3b3;
            font-size: 0.8rem;
            margin-top: 0.25rem;
        }

        .comment_time{
            font-size: 0.6rem;
        }

        .zan {
            width: 22px;
            height: 30px;
            display: inline-block;
            background: url('__IMG__main1_nozan.png') no-repeat center center;
            background-size: 13px 13px;
            vertical-align: bottom;
        }
        .zan1 {
            width: 22px;
            height: 30px;
            display: inline-block;
            background: url('__IMG__main1_zan.png') no-repeat center center;
            background-size: 13px 13px;
            vertical-align: bottom;
        }
        .comment_total {
            width: 22px;
            height: 30px;
            display: inline-block;
            background: url('__IMG__main1_news.png') no-repeat center center;
            background-size: 13px 13px;
            vertical-align: bottom;
        }
        .float_right{
            display: inline-block;width: auto;
            height: 30px;
            line-height: 30px;
            float: right;
        }
        .comment_all{
            margin-right: 1rem;
        }
        .bottom{
            position:fixed;
            left:0;
            bottom:0;
            width:100%;
            height:2.475rem;
            background-color: #FFFFFF;
            padding-left: 0.75rem;
            padding-right:0.675rem;
            box-shadow:1px 0px 0px rgba(230,230,230,1);
        }
        .like{
            width: 22px;
            height: 2.475rem;
            display: inline-block;
            background: url('__IMG__main1_like.png') no-repeat center center;
            background-size: 22px 22px;
            vertical-align: bottom;
            margin-left:0.675rem;
            margin-right:0.9rem;
        }
        .like1{
            width: 22px;
            height: 2.475rem;
            display: inline-block;
            background: url('__IMG__main1_unlike.png') no-repeat center center;
            background-size: 22px 22px;
            vertical-align: bottom;
            margin-left:0.675rem;
            margin-right:0.9rem;
        }
        .zhuanfa{
            width: 22px;
            height: 2.475rem;
            display: inline-block;
            background: url('__IMG__zhuanfa.png') no-repeat center center;
            background-size: 22px 22px;
            vertical-align: bottom;
            margin-left:0.675rem;
            margin-right:0.9rem;
        }
        .fabu{
            height: 1.6rem;
            line-height:1.8rem;
            margin-top:0.44rem;
            background-color: #F5F5F5;
            border-radius:0.8rem;
            font-size:13px;
            color:#CCCCCC;
        }
        .write{
            width: 0.75rem;
            height: 0.75rem;
            margin-left:0.5rem;
            margin-top:0.425rem;
            margin-right:4px;
        }
    </style>
    <style>
        .aui-bar-nav .aui-iconfont {
            position: relative;
            font-family: "aui_iconfont" !important;
            font-size: 0.75rem;
            color: #E73C5C;
            font-style: normal;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            height: 2.4rem;
        }

        .aui-bar-nav {
            background-color: #fff;
        }

        .aui-icon-tu {
            height: 2.4rem;
            width: 49px;
            background: url('__IMG__left.png') no-repeat 0.5rem center;
            background-size: 22px 22px;
        }

        .aui-bar-nav .aui-pull-right {
            padding-right: 0.75rem;
        }

        .aui-bar-nav .aui-title {
            font-size: 0.9rem;
            color: #333333;
            font-weight: 500;
        }
    </style>
    <style>
        html,body{
            width: 100%;
            height: 100%;
        }
        .flex-wrap{ display: -webkit-box;	display:box;display: -webkit-flex;	display: flex; }
        .flex-con{  -webkit-box-flex: 1;     -webkit-flex: 1;    flex: 1;}
        .flex-vertical{  -webkit-box-horizontal: vertical;-webkit-flex-flow: column; flex-flow: column;}
        .wei_huifu{
            width: 100%;
            height: 100%;
            position: fixed;
            z-index: 999;
        }
        .wei_huifu0{
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.3);
        }
        .wei_huifu1{
            width: 100%;
            height: 50px;
            background-color: #fff;
            position: absolute;
            bottom: 0;
        }

        .wei_huifu2{
            width: 74px;
            background-color: #fff;
            color: #47A1FE;
            line-height: 50px;
            text-align: center;
            font-size: 16px;
            height: 50px;
            border: 0;
        }
        input[type='text'].wei_input{
            width: 100%;
            height: 30px;
            background-color: #f5f5f5;
            border-radius: 15px;
            outline: 0;
            margin-top: 10px;
        }
        .hidden{
            display: none;
        }
    </style>
</head>

<body>
<div class="flex-vertical wei_huifu hidden" id="wei_huifu">
    <div class="flex-con wei_huifu0" onclick="wei_hui2()"></div>
    <input type="hidden" name="my_answer_id" value="">
    <div class="wei_huifu1">
        <div class="flex-wrap">
            <div class="flex-con" style="padding-left:15px;">
                <input type="text" name="huifucontent" value="" placeholder="输入回复内容" class="wei_input">
            </div>
            <button class="wei_huifu2" onclick="wei_hui1()">回复</button>
        </div>
    </div>
</div>
<header class="aui-bar aui-bar-nav underLine" style="padding-top:25px;" id="header">
    <a class="aui-pull-left" tapmode="active" onclick="history.go(-1)"> <span class="aui-iconfont aui-icon-tu"> </span> </a>
    <div class="aui-title">详情</div>
</header>
<div class="news">
    <div class="title">{$detail.information_title}</div>
    <div class="intro">{$detail.name}<span class="time">{$detail.information_release_time}</span></div>
    <!-- 富文本 -->
    <div>{$detail.information_content}</div>
</div>

<div class="comment">
    <div class="comment_title">评论({$detail.num})</div>
        <div class="upOrDown">
            <div class="upOrDown_data">
                {volist name="detail['answer']" id="vo"}
                <div class="flex-wrap">
                    <div class="user_img"><img src="{$vo.user_image}" alt=""></div>
                    <div class="flex-con">
                        <div class="user_name">{$vo.user_username}
                            {if $vo['delete']==1}
                            <span class="comment_delete" id_type="1" onclick="zj_fb(this)" idd="{$vo.answer_id}"></span>
                            {/if}
                        </div>
                        <!-- main1_pinglun.png -->
                        <div class="comment_desc aui-ellipsis-2">{$vo.answer_content}</div>
                        <!-- 三张图 -->
                        <div class="comment_imgs after">
                            {volist name="vo['answer_img']" id="img"}
                            <img src="{$img}" alt="">
                            {/volist}
                        </div>
                        {if isset($vo['under'])}

                            <div class="comment_txt">
                                {volist name="vo['under']" id="vk"}
                                <div class="comment_one">{$vk['name2']}:{$vk['reply_content']}
                                    {if $vk['is_delete']==1}
                                    <span class="red_delete" id_type="2" onclick="zj_fb(this)" idd="{$vk['reply_id']}">删除</span>
                                    {/if}
                                </div>
                                {/volist}
                                {if $vo.count>2}
                                <div class="comment_three" onclick="fnComment(this)" idd="{$vo.answer_id}" tapmode='acdtive'>查看全部评论></div>
                                {/if}
                            </div>
                        {/if}
                        <div class="comment_footer">
                            <span class="comment_time">{$vo.answer_time}</span>
                            <span class="float_right" onclick="fnZan(this)" idd="{$vo.answer_id}"  dz="{$vo.dz}" tapmode='active'>
                                {if $vo.dz==1}
                                <span class="zan1" id="dianzan"></span>
                                {else /}
                                <span class="zan" id="dianzan"></span>
                                {/if}
                                <span id="zan_num">{$vo.answer_dz}</span>
                            </span>
                            <span class="float_right comment_all" onclick="wei_hui(this)" idd_name="{$vo.user_username}" idd="{$vo.answer_id}"><span class="comment_total"></span>{$vo.count}</span>
                        </div>
                    </div>
                </div>
                {/volist}
            </div>
        </div>
</div>

<div class="bottom flex-wrap">
    <div class="flex-con">
        <div class="fabu flex-wrap" onclick="fabu(this)" idd="{$detail.information_id}">
            <div class="write"><img src="__IMG__write@3x.png" alt="" /></div>
            <span>写评论</span>
        </div>
    </div>
    {if $detail['collection']==1}
    <div class="like" onclick="likesc(this)"   idd="{$detail.information_id}"></div>
    {else /}
    <div class="like1" onclick="likesc(this)"  idd="{$detail.information_id}"></div>
    {/if}
</div>
<input type="hidden" name="id" value="{$id}">
</body>
<script type="text/javascript" src="__JS__api.js"></script>
<script type="text/javascript" src="__JS__tt.js"></script>
<script type="text/javascript" src="__JS__aui-actionsheet.js"></script>
<script type="text/javascript" src="__JS__doT.min.js"></script>
<script type="text/javascript" src="__JS__aui-lazyload.js"></script>
<script type="text/javascript" src="__JS__jquery.min.js"></script>
<script type="text/javascript" src="__JS__layer_mobile/layer.js"></script>
<script type="text/javascript" src="__JS__dropload.min.js"></script>
<script>
    //发布评论
    function fabu(el) {
        var idd=$api.attr(el,'idd');
        location.href='{:url("Information/question")}?id='+idd;
    }
    //显示
    function wei_hui(el){
        var idd=$api.attr(el,'idd');
        var idd_name=$api.attr(el,'idd_name');
        document.getElementById('wei_huifu').className='flex-vertical wei_huifu';
        $('input[name="my_answer_id"]').val(idd);
        $('input[name="huifucontent"]').attr('placeholder',"回复"+idd_name);

        $("body").css("overflow-y",'hidden');
    }
    //隐藏
    function wei_hui1(){
        var content = $.trim($('input[name="huifucontent"]').val());
        var id = $('input[name="my_answer_id"]').val();
        if(content>200){
            layer.open({
                content:"回复不能超过200个字节",
                skin: 'msg'
                ,time: 3 //2秒后自动关闭
            });
            return false;
        }
        if(content <= 0){
            layer.open({
                content:"回复不能为空",
                skin: 'msg'
                ,time: 3 //2秒后自动关闭
            });
            return false;
        }
        $.ajax({
            url:'{:url("Information/addComment")}',
            data:{answer_id:id,content:content},
            type:'POST',
            dataType:'JSON',
            success:function (data) {
                if(data.status==200){
                    document.getElementById('wei_huifu').className='flex-vertical wei_huifu hidden';
                    window.location.reload();

                }else if(data.status=='100'){
                    layer.open({
                        content:data.msg,
                        skin: 'msg'
                        ,time: 3 //2秒后自动关闭
                    });
                    document.getElementById('wei_huifu').className='flex-vertical wei_huifu hidden';

                    window.location.reload();
                }
            }
        })
    }
    //隐藏
    function wei_hui2(){
        document.getElementById('wei_huifu').className='flex-vertical wei_huifu hidden';
    }
    //活动评论点赞
    function fnZan(el) {
        var idd=$api.attr(el,'idd');
        $.ajax({
            url:'{:url("Information/like")}',
            data:{answer_id:idd,type:1},
            type:'POST',
            dataType:'JSON',
            success:function (data) {
                if(data.status==200){
                    if ($api.attr(el, 'dz') == '2') {
                        $api.dom(el, '#zan_num').innerHTML = parseInt($api.dom(el, '#zan_num').innerHTML) + 1;

                        $api.dom(el, '#dianzan').style.backgroundImage = "url('" + "__IMG__main1_zan.png" + " ') ";

                        $api.attr(el, 'dz', '1');
                    } else {
                        $api.dom(el, '#zan_num').innerHTML = parseInt($api.dom(el, '#zan_num').innerHTML) - 1;

                        $api.dom(el, '#dianzan').style.backgroundImage = "url('" + "__IMG__main1_nozan.png" + " ') ";

                        $api.attr(el, 'dz', '2');
                    }

                }else if(data.status=='E001'){
                    layer.open({
                        content: '操作失败'
                        ,skin: 'msg'
                        ,time: 3 //2秒后自动关闭
                    });
//                    window.location.reload();
                }
            }
        })
    }

    //收藏，取消收藏
    function likesc(el) {
        var idd=$api.attr(el,'idd');
        $.ajax({
            url:'{:url("Information/collect")}',
            data:{id:idd},
            type:'POST',
            dataType:'JSON',
            success:function (data) {
                collection = data.data.collect;
                if(data.status==200){
                  if(collection==1){
                      layer.open({
                          content: '收藏成功'
                          ,skin: 'msg'
                          ,time: 3 //2秒后自动关闭
                      });
                      el.className="like";
                  }else{
                      layer.open({
                          content: '取消收藏成功'
                          ,skin: 'msg'
                          ,time: 3 //2秒后自动关闭
                      });
                      el.className="like1";
                  }

                }else if(data.status=='E001'){
                    layer.open({
                        content: '操作失败'
                        ,skin: 'msg'
                        ,time: 3 //2秒后自动关闭
                    });

                    window.location.reload();
                }
            }
        })
    }
    //删除评论
    function zj_fb(el) {
        var idd=$api.attr(el,'idd');
        var id_type=$api.attr(el,'id_type');
        $.ajax({
            url:'{:url("Information/delAnswer")}',
            data:{id:idd,type:id_type},
            type:'POST',
            dataType:'JSON',
            success:function (data) {
                if(data.status==200){
                    layer.open({
                        content: '操作成功'
                        ,skin: 'msg'
                        ,time: 3 //2秒后自动关闭
                    });
                    window.location.reload();
                }else if(data.status=='E001'){
                    layer.open({
                        content: '操作失败'
                        ,skin: 'msg'
                        ,time: 3 //2秒后自动关闭
                    });
                    window.location.reload();
                }
            }
        })
    }
    // 查看全部回复
    function fnComment(el) {
        var idd=$api.attr(el,'idd');
        location.href = '{:url("Information/answerdatail")}?answer_id='+idd;
    }
</script>
<script>
    var page = 1;
    /**
     * 上拉加载，下拉刷新
     */
    var dropload = $('.upOrDown').dropload({
        scrollArea : window,
        autoLoad : true,
//        domUp : {
//            domClass   : 'dropload-up',
//            domRefresh : '<div class="dropload-refresh">↓下拉刷新-自定义内容</div>',
//            domUpdate  : '<div class="dropload-update">↑释放更新-自定义内容</div>',
//            domLoad    : '<div class="dropload-load"><span class="loading"></span>加载中-自定义内容...</div>'
//        },
//        domDown : {
//            domClass   : 'dropload-down',
//            domRefresh : '<div class="dropload-refresh">刷新</div>',
//            domLoad    : '<div class="dropload-load"><span class="loading"></span>加载中...</div>',
//            domNoData  : '<div class="dropload-noData">无数据</div>'
//        },
        loadDownFn : function(me){
            var keyword = $('input[name="id"]').val();

            page++;
            $.ajax({
                url:'{:url("Information/ajaxdetail")}',
                data:'page='+page+'&id='+keyword,//
                type:'POST',
                dataType:'JSON',
                success: function(data){
                    var arrLen = data.msg.length;
                    if(arrLen<=0){
                        me.lock();
//                         无数据
                        me.noData(true);
                        // 每次数据加载完，必须重置
                        me.resetload();
                    }else{
                        var datas = data.msg;
                        $.each(datas,function(key,v){
                            var _html='';
                            _html +='<div class="flex-wrap">';
                            _html +='<div class="user_img"><img src="'+v.user_image+'" alt=""></div>';
                            _html +='<div class="flex-con">';
                            _html +='<div class="user_name">'+v.user_username;
                            if(v.delete==1){
                                _html +='<span class="comment_delete" id_type="1" onclick="zj_fb(this)" idd="'+v.answer_id+'"></span>';
                            }
                            _html +='</div>';
                            _html +='<div class="comment_desc aui-ellipsis-2">'+v.answer_content+'</div>'
                            _html +='<div class="comment_imgs after">'
                            $.each(v.answer_img,function (kk,vv) {
                            _html +='<img src="'+vv+'" alt="">';
                            })

                            _html +='</div>';
                            _html +='<div class="comment_txt">';

                            if(v.under.length>0){
                               $.each(v.under,function (vk,vp) {
                             _html +='<div class="comment_one">'+vp.name2+':'+vp.reply_content;
                               if(vp.is_delete==1){
                             _html +='<span class="red_delete" id_type="2" onclick="zj_fb(this)" idd="'+vp.reply_id+'">删除</span>';
                               }
                               _html +='</div>';
                             })
                            }
                            if(v.count>2){

                            _html +='<div class="comment_three" onclick="fnComment(this)" idd="'+v.answer_id+'" tapmode="acdtive">查看全部评论></div>';
                            _html +='</div>';
                            }

                            _html +='<div class="comment_footer">';
                            _html +='<span class="comment_time">'+v.answer_time+'</span>';
                            _html +='<span class="float_right" onclick="fnZan(this)" idd="'+v.answer_id+'"  dz="'+v.dz+'" tapmode="active">';
                             if(v.dz==1){
                             _html +='<span class="zan1" id="dianzan"></span>';
                            }else{
                             _html +='<span class="zan" id="dianzan"></span>';
                            }
                            _html +='<span id="zan_num">'+v.answer_dz+'</span>';
                            _html +='</span>';
                            _html +='<span class="float_right comment_all" onclick="wei_hui(this)" idd_name="'+v.user_username+'"  idd="'+v.answer_id+'" ><span class="comment_total"></span>'+v.count+'</span>';
                            _html +='</div> </div> </div>';
                            $(".upOrDown_data").append(_html);
                        });
//                        $('.upOrDown_data').append(data);
                        // 每次数据加载完，必须重置
                        me.resetload();
                    }
                },
                error: function(xhr, type){
                    alert('Ajax error!');
                    // 即使加载出错，也得重置
                    me.resetload();
                }
            });
        },
        loadUpFn : function(me){
            var keyword = $('input[name="id"]').val();

            page = 1;
            $.ajax({
                url:'{:url("Information/ajaxdetail")}',
                data:'page='+page+'&id='+keyword,
                type:'POST',
                dataType:'json',
                success: function(data){
                    $('.upOrDown_data').empty();//
                    var datas = data.msg;
                    $.each(datas,function(key,v){
                        var _html='';
                        _html +='<div class="flex-wrap">';
                        _html +='<div class="user_img"><img src="'+v.user_image+'" alt=""></div>';
                        _html +='<div class="flex-con">';
                        _html +='<div class="user_name">'+v.user_username;
                        if(v.delete==1){
                            _html +='<span class="comment_delete" id_type="1" onclick="zj_fb(this)" idd="'+v.answer_id+'"></span>';
                        }
                        _html +='</div>';
                        _html +='<div class="comment_desc aui-ellipsis-2">'+v.answer_content+'</div>'
                        _html +='<div class="comment_imgs after">'
                        $.each(v.answer_img,function (kk,vv) {
                            _html +='<img src="'+vv+'" alt="">';
                        })

                        _html +='</div>';
                        _html +='<div class="comment_txt">';

                        if(v.under.length>0){
                            $.each(v.under,function (vk,vp) {
                                _html +='<div class="comment_one">'+vp.name2+':'+vp.reply_content;
                                if(vp.is_delete==1){
                                    _html +='<span class="red_delete" id_type="2" onclick="zj_fb(this)" idd="'+vp.reply_id+'">删除</span>';
                                }
                                _html +='</div>';
                            })
                        }
                        if(v.count>2){

                            _html +='<div class="comment_three" onclick="fnComment(this)" idd="'+v.answer_id+'" tapmode="acdtive">查看全部评论></div>';
                            _html +='</div>';
                        }

                        _html +='<div class="comment_footer">';
                        _html +='<span class="comment_time">'+v.answer_time+'</span>';
                        _html +='<span class="float_right" onclick="fnZan(this)" idd="'+v.answer_id+'"  dz="'+v.dz+'" tapmode="active">';
                        if(v.dz==1){
                            _html +='<span class="zan1" id="dianzan"></span>';
                        }else{
                            _html +='<span class="zan" id="dianzan"></span>';
                        }
                        _html +='<span id="zan_num">'+v.answer_dz+'</span>';
                        _html +='</span>';
                        _html +='<span class="float_right comment_all" onclick="wei_hui(this)" idd_name="'+v.user_username+'"  idd="'+v.answer_id+'"><span class="comment_total"></span>'+v.count+'</span>';
                        _html +='</div> </div> </div>';
                        $(".upOrDown_data").append(_html);
                    });
                    me.resetload();
                    me.unlock();
                    me.noData(false);
                },
                error: function(xhr, type){
                    alert('Ajax error!');
                    me.resetload();
                }
            });
        }
    });
</script>
</html>
